<template>
	<view class="bg">
		<view class="user">
			<view class="userdata" @tap="edit">
				<view class="img">
					<lazy image="/static/image/my/default.png" :src="avatar" class="lazyimg" width="120rpx" height="120rpx"></lazy>
					<!-- <image src="../../static/image/my/default.png" mode="" v-if="avatar"></image>
					<image :src="avatar" mode="" v-if="avatar"></image> -->
				</view>
				<view class="info">
					<view class="qq">{{user_nicename}}</view>
					<view class="imglist">
						<view class="sex">
							<image src="/static/image/my/nan.png" mode="" v-if="sex == 1"></image>
							<image src="/static/image/my/nv.png" mode="" v-if="sex == 2"></image>
						</view>
						<view class="level">
							<image :src="levelimg" mode=""></image>
						</view>
						<view class="level_anchor">
							<image :src="levelanchorimg" mode=""></image>
						</view>
					</view>
					<view class="money">ID:{{uid}}</view>
				</view>
				<view class="more">
					<image src="../../static/image/my/edit.png" mode=""></image>
				</view>
			</view>
			
			<view class="content-count">
				<view class="left">
					<view class="top">{{vip_date}}</view>
					<view>会员到期时间</view>
				</view>
				<view class="left" @click="go('/pages/my/follow')">
					<view class="top">{{follows}}</view>
					<view>关注</view>
				</view>
				<view class="left" @click="go('/pages/my/fans')">
					<view class="top">{{fans}}</view>
					<view>粉丝</view>
				</view>
			</view>
		</view>
		
		<view class="navlist">
			<view class="nav" @click="go()">
				<image src="../../static/image/my/xiaoxi.png" mode=""></image>
				<text>消息</text>
			</view>
			<view class="nav" @click="go()">
				<image src="../../static/image/my/recharge.png" mode=""></image>
				<text>充值</text>
			</view>
			<view class="nav" @click="go()">
				<image src="../../static/image/my/detail.png" mode=""></image>
				<text>明细</text>
			</view>
			<view class="nav" @click="go('./prop')">
				<image src="../../static/image/my/prop.png" mode=""></image>
				<text>道具</text>
			</view>
		</view>
		<view class="" v-for="(item,index) in menulist">
			<view class="titlelist">
				{{item.title}}
			</view>
			<view class="mine-ul">
				<view class="two-box" @click="go(item1.href,item1.name)" v-for="(item1,index1) in item.list">
					<view class="two-box-img">
						<image :src="item1.thumb" mode=""></image>
					</view>
					<view class="two-text">
						{{item1.name}}
					</view>
					<view class="two-box-img2">
						<image src="../../static/image/my/right.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import lazy from "@/components/lazy-load.vue";
	export default {
		components: {lazy},
		data() {
			return {
				id: '',
				uid: '',
				sex: 0,
				fans: 0,
				follows: 0,
				avatar: '',
				vip_date: '',
				levelimg: '',//等级图标
				levelanchorimg: '',//直播等级图标
				user_nicename: '',
				user:[],
				config:[],
				menulist:[],
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.$api.checklogin();
			this.config = uni.getStorageSync('config');
			this.uid = uni.getStorageSync('uid');
			let token = uni.getStorageSync('token');
			if(!token || !this.uid){
				this.login();
			}
			this.getUser();
		},
		methods: {
			getUser(){
				this.$api.sendRequest({
					data:{
						service:'User.getBaseInfo',
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token'),
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info[0];
							this.user = param;
							this.menulist = param.list;
							this.sex = param.sex;
							this.user_nicename = param.user_nicename;
							this.avatar = param.avatar;
							this.fans = param.fans;
							this.follows = param.follows;
							this.vip_date = param.vip_date;
							var level = this.config['level'];
							let result = level.filter(item => item.levelid == param.level);
							this.levelimg = result[0]['thumb'];
							var level_anchor = this.config['levelanchor'];
							let result1 = level_anchor.filter(item => item.levelid == param.level_anchor);
							this.levelanchorimg = result1[0]['thumb'];
							
						}else{
							// var msg = res.msg == '' ? res.data.msg : res.msg;
							// uni.showToast({
							// 	icon: "none",
							// 	title: msg,
							// });
							// this.$api.checklogin('/pages/my/my');
							// setTimeout(() => {
							// 	this.login();
							// }, 500);
							
						}
					}
				});
			},
			edit(){
				// uni.redirectTo({
				// 	url: "/pages/login/login",
				// })
			},
			login(){
				uni.redirectTo({
					url: "/pages/login/login",
				})
			},
			go(e,name = ''){
				if(!e && name != '个性设置'){
					return false;
				}
				if(name){
					if(name == '个性设置'){
						uni.redirectTo({
							url: './set'
						})
					}else{
						var url = '/pages/my/my';
						uni.setStorageSync('src',e);
						uni.redirectTo({
							// url: '/pages/index/webview?backtype=1&url=' + url + '&src=' + e,
							url: '/pages/index/webview?backtype=1&url=' + url,
						})
					}
				}else{
					uni.redirectTo({
						url: e
					})
				}
				
			},
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.bg {
		height: 100%;
		overflow-y: auto;
		.user{
			background-image: url('@/static/image/my/top.png');
			    background-size: 100%;
			.userdata{
				
				padding-top: 80rpx;
				display: flex;
				justify-content: space-around;
				    align-items: center;
					margin-bottom: 20rpx;
					.img{
						// width: 25%;
						height: 120rpx;
						border-radius: 60rpx;
						overflow: hidden;
						.lazyimg{
							width: 120rpx;
							height: 120rpx;
						}
						image{
							width: 120rpx;
							height: 120rpx;
						}
					}
					.info{
						width: 46%;
						// margin-left: 10rpx;
						.qq{
							color: #1D1D1D;
							font-size: 36rpx;
							font-weight: 400;
						}
						.imglist{
							display: flex;
							align-items: center;
							.sex{
								width: 40rpx;
								height: 30rpx;
								image{
									width: 100%;
									height: 100%;
								}
								margin-right: 10rpx;
							}
							.level{
								width: 60rpx;
								height: 30rpx;
								image{
									width: 100%;
									height: 100%;
								}
								margin-right: 10rpx;
							}
							.level_anchor{
								width: 60rpx;
								height: 30rpx;
								image{
									width: 100%;
									height: 100%;
								}
							}
						}
						.money{
							color: #666666;
							font-size: 24rpx;
						}
					}
					.more{
						width: 36rpx;
						height: 36rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
			}
			
			
			// background: linear-gradient(#000,#22211f);
			.content-count {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 36rpx;
			
				.left {
					display: flex;
					flex-direction: column;
					width: 200rpx;
					height: 180rpx;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
			
					view {
						margin: 4rpx 0;
					}
					.top{
						font-size: 28rpx;
						color: #3D3D3D;
						// font-weight: ;
					}
				}
			}
			
		}
	}
	.navlist{
		display: flex;
		justify-content: space-around;
		background-color: #ffffff;
		width: 670rpx;
		margin: auto;
		padding: 30rpx 20rpx;
		border-radius: 8rpx;
		.nav{
			text-align: center;
			image{
				width: 80rpx;
				height: 80rpx;
			}
			text{
				display: block;
				    color: #1D1D1D;
				    font-size: 24rpx;
			}
		}
	}
	.titlelist{
		font-size: 32rpx;
		font-size: #3D3D3D;
		font-weight: bold;
		padding: 20rpx;
		padding-top: 34rpx;
		text-indent: 6rpx;
	}
	.mine-ul{
		width: 670rpx;
		margin: 0 auto;
		margin-top: 10rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 15rpx 20rpx;
		.nobox{
			border-bottom:0 !important;
		}
		.two-box:last-child{
			border-bottom: none !important;
		}
		.two-box {
			background: #FFFFFF;
			display: flex;
			height: 104rpx;
			align-items: center;
			border-bottom: 2rpx solid #e8e7e785;
			
			.two-box-img {
				height: 46rpx;
				width: 46rpx;
				margin: 0 20rpx;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
		
			.two-text {
				flex: 1;
				font-size: 32rpx;
				
				color: #1D1D1D;
			}
		
			.two-box-img2 {
				height: 30rpx;
				width: 30rpx;
				margin: 0 32rpx;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.bott{
		margin-bottom: 150rpx;
	}
	.btn{
		background-color: #ffffff;
		width: 720rpx;
		margin: 20rpx auto;
		.btnlist{
			display: flex;
			justify-content: space-around;
			align-items: center;
			    padding: 30rpx 0;
				width: 650rpx;
				    margin: auto;
				    border-bottom: 2rpx solid #ccc;
			.title{
				color: #000;
				width: 22%;
				border-left: 8rpx solid #ebcc45;
				    text-indent: 10rpx;
				// margin-left: 20rpx;
			}
			.list{
				width: 70%;
				display: flex;
				justify-content: space-around;
				.nav{
					text-align: center;
					image{
						width: 60rpx;
						height: 60rpx;
					}
					text{
						display: block;
						    color: #7c7c7c;
							font-size: 24rpx;
					}
				}
			}
		}
	}
	
	
	.u-tabs {
		background-color: transparent !important;
	}

	page {
		background-color: #f3f3f3;
		height: 100%;
	}

	
</style>